<template>
<el-container>
  <el-main><div id="map" style="width:100%;height:500px"></div></el-main>
  <el-aside width="30%">
    <chart></chart>
  </el-aside>
</el-container>
</template>

<script>
import { MP } from '@/map.js'
import {getSite} from 'network/site.js'

import Chart from 'views/home/components/Chart'

export default {
  components: {
    Chart
  },
  mounted(){
    const _this = "lyyOKkxVBYr8bLfmiAfSiShvK5pnZGV5"
    MP(_this).then(() => {
      getSite().then(res => {
        this.map = new BMap.Map("map");          // 创建地图实例 
        this.map.enableScrollWheelZoom();   //启用滚轮放大缩小，默认禁用
        this.map.enableContinuousZoom();
        this.map.addControl(new BMap.ScaleControl());
        this.map.centerAndZoom(new BMap.Point(113.088001,28.31618), 5);  
        for(let site of res) {
          let point = new BMap.Point(site.coordinate.substring(0,site.coordinate.indexOf(",")),
                                  site.coordinate.substring(site.coordinate.indexOf(",")*1+1))
          let marker = new BMap.Marker(point)
          this.map.addOverlay(marker);
          marker.addEventListener("click", function(){    
              var opts = {    
                  width : 300,     // 信息窗口宽度    
                  height: 70,     // 信息窗口高度    
                  title : "地址:"+site.siteAddress  // 信息窗口标题   
              }    
              let infoWindow = new BMap.InfoWindow(site.siteName, opts);  // 创建信息窗口对象    
              this.map.openInfoWindow(infoWindow, point); 
          });
        }
      })
    }) 
  }
}
</script>

<style scoped>
.el-carousel__item:nth-child(2n) {
  background:var(--color-background);
}
</style>
